<template>
  <el-container style="flex-direction:column;position: relative;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span v-if="orderData.status">
          订单状态：
          <span>
            {{orderData.status.desc}}
          </span>
          <span v-if="orderData.status.code == -1 &&  orderData.orderStatusList">
            <span>{{orderData.orderStatusList[orderData.orderStatusList.length-1].changeMessage.substring(7)}}</span>
            <span> 退款时间：{{orderData.orderStatusList[orderData.orderStatusList.length-1].changeTime |dateYMDHMSFormat}}</span>
          </span>
        </span>
        <div style="float: right;">
          <div v-if="orderData.status && orderData.status.code == 1" style="float: left;margin-right:10px">
            <el-button type="primary" size="mini"  @click="print">打印</el-button>
            <el-button type="primary" size="mini" @click="printComplete">打印完成</el-button>
          </div>
          <div v-if="orderData.status && orderData.status.code == -1" style="float: left;margin-right:10px">
            <el-button type="primary" size="mini"  @click="refuseRefund">拒绝退款</el-button>
            <el-button type="primary" size="mini" @click="immediateRefund">立即退款</el-button>
          </div>
          <el-button type="success" size="mini" @click="openOrderRemarkesDialog">订单备注</el-button>
        </div>
      </div>
      <div>
        <el-descriptions title="基本信息" direction="vertical" :column="6" border>
          <el-descriptions-item label="订单号" label-class-name="my-label">{{orderData.number}}</el-descriptions-item>
          <el-descriptions-item label="门店" label-class-name="my-label">{{orderData.name}}</el-descriptions-item>
          <el-descriptions-item label="下单时间" label-class-name="my-label" :span="2">{{orderData.createTime|dateYMDHMSFormat}}</el-descriptions-item>
          <el-descriptions-item label="类型" label-class-name="my-label">
            <el-tag size="small">{{orderData.isSelfMention ==1?"自提":"配送"}}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="实际支付" label-class-name="my-label">￥{{orderData.allPrice}}</el-descriptions-item>
          <el-descriptions-item label="文件名称" label-class-name="my-label" :span="3">{{orderData.fileName}}</el-descriptions-item>
          <el-descriptions-item label="打印范围" label-class-name="my-label">{{orderData.pageNumber == 0?"所有":orderData.pageNumber}}</el-descriptions-item>
          <el-descriptions-item label="用户备注" label-class-name="my-label">{{orderData.orderRemarks}}</el-descriptions-item>
          <el-descriptions-item label="商家备注" label-class-name="my-label">{{orderData.merchantRemarks}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions v-if="orderData.isSelfMention == 1" title="联系方式" direction="vertical" :column="3" border style="margin-top:15px">
          <el-descriptions-item label="联系人" label-class-name="my-label">{{orderData.orderContacts}}</el-descriptions-item>
          <el-descriptions-item label="收货地址" label-class-name="my-label">{{orderData.phoneNumber}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions v-if="orderData.isSelfMention == 0 && orderData.address" title="收货人信息" direction="vertical" :column="3" border style="margin-top:15px">
          <el-descriptions-item label="联系人" label-class-name="my-label">{{orderData.address.name}}</el-descriptions-item>
          <el-descriptions-item label="收货地址" label-class-name="my-label">{{orderData.address.address}}</el-descriptions-item>
          <el-descriptions-item label="联系电话" label-class-name="my-label">{{orderData.address.phoneNumber}}</el-descriptions-item>
        </el-descriptions>
        <h1>商品信息</h1>
        <el-table
          show-summary
          :data="orderData.storeOrderCommodityDetailsDTOList"
          :summary-method="getSummaries"
          size="small"
          style="width: 100%;"
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column prop="image" label="商品图片" align="center" header-align="center">
             <template slot-scope="scope">
              <img :src="scope.row.image ? baseURL+scope.row.image:'#'" style="width:80px;height:80px">
            </template>
          </el-table-column>
          <el-table-column prop="commodityName" label="商品名称"  align="center" header-align="center"/>
          <el-table-column prop="groupValueList" label="商品规格"  align="center" header-align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isMultiSpecification == 0" size="small">默认</el-tag>
              <div v-else>
                <el-tag v-for="g in scope.row.groupValueList" :key="g.groupValueId" style="margin-right: 10px;" size="small">{{g.groupValueName}}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="unitPrice" label="单价" align="center" header-align="center" />
          <el-table-column prop="quantity" label="数量"  align="center" header-align="center"/>
          <el-table-column prop="cartInfoMap" label="小计(元)" align="center" header-align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.unitPrice * scope.row.quantity }}</span>
            </template>
          </el-table-column>
        </el-table>
        <h1>操作信息</h1>
        <el-table
          :data="orderData.orderStatusList" border
          size="small"
          style="width: 100%;"
        >
        <el-table-column prop="changeTime" label="操作时间"  align="center" header-align="center" width="180px">
          <template slot-scope="scope">
            {{scope.row.changeTime|dateYMDHMSFormat}}
          </template>
        </el-table-column>
        <el-table-column prop="changeMessage" label="操作内容"  align="center" header-align="center"/>
        </el-table>
      </div>
    </el-card>
    <OrderRemarks
     :orderRemarkesVisible.sync="orderRemarkesVisible"
     :orderRemarkesForm="orderRemarkesForm"
     @closeOrderRemarkesDialog="orderRemarkesVisible = false"
     @orderRemarkesOperationFrom="orderRemarkesOperationFrom"
    ></OrderRemarks>
  </el-container>
</template>

<script>
import OrderRemarks from "./OrderRemarks.vue";
import { baseURL } from '@/utils/setting.js'
import {getStoreByOrderId,updateOrderStautsByOrderId} from '@/api/modules/orderManagement/order.js'
import { Base64 } from 'js-base64';
export default {
  data() {
    return {
      orderData:{},
      orderRemarkesVisible:false,
      orderRemarkesForm:{}
    }
  },
  components:{OrderRemarks},
  computed: {
    baseURL() { return baseURL },
  },
  created(){
    getStoreByOrderId({orderId:this.$route.params.orderId}).then(res=>{
      this.orderData = res.data.data
    })
  },
  methods:{
     immediateRefund(){
      let row= this.orderData
      this.$confirm(`同意订单${row.number}退款?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateOrderStautsByOrderId([{
          orderId:row.orderId,
          status: -2
        }]).then(()=>{
          getStoreByOrderId({orderId:this.$route.params.orderId}).then(res=>{
            this.orderData = res.data.data
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退款'
        });          
      });
    },
    refuseRefund(){
      let row= this.orderData
       this.$confirm(`拒绝订单${row.number}退款?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateOrderStautsByOrderId([{
          orderId:row.orderId,
          status: -3
        }]).then(()=>{
          getStoreByOrderId({orderId:this.$route.params.orderId}).then(res=>{
            this.orderData = res.data.data
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消拒绝退款'
        });          
      });
    },
    print(){
      let row = this.orderData
      if(!row.fileUrl){
        this.$message({
          message: '该订单上传文件为空，请联系买家！',
          type: 'warning'
        });
        return;
      }
      let nowFileUrl =baseURL+ row.fileUrl
      let url = 'http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode(nowFileUrl))
      window.open(url)
    },
    printComplete(){
      let row = this.orderData
      let data = [{
        orderId:row.orderId,
        status: row.isSelfMention ==1?2:3
      }]
      updateOrderStautsByOrderId(data).then(()=>{
        getStoreByOrderId({orderId:this.$route.params.orderId}).then(res=>{
          this.orderData = res.data.data
        })
      })
    },
    orderRemarkesOperationFrom(){
      this.orderRemarkesVisible = false
      getStoreByOrderId({orderId:this.$route.params.orderId}).then(res=>{
        this.orderData = res.data.data
      })
    },
    openOrderRemarkesDialog(){
      this.orderRemarkesVisible = true
      let form = {
        orderId:this.orderData.orderId,
        number: this.orderData.number,
        merchantRemarks:this.orderData.merchantRemarks
      }
      this.orderRemarkesForm = form
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        } else if (index === 6) {
          const values = data.map(item => Number(item.unitPrice * item.quantity));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += ' 元';
        }
      });
      return sums;
    }
  }
}
</script>

<style scoped>
.box-card >>> .el-card__header{
  background: #f2f6fc;
}
.box-card >>> .my-label {
  background: #f2f6fc;
}
</style>